import {logout} from "../../../request/auth"

import {
    ShoppingFilled,
    HomeFilled,
    FileTextFilled,
    SafetyCertificateFilled,
    SettingFilled
} from '@ant-design/icons'
import {Tooltip, Button} from 'antd'
import './mypage.css'
import React from "react"
import Logo from "../img/1.jpg"
import {useNavigate} from "react-router-dom";

function User() {
    const navigate = useNavigate()

    function setting() {
        navigate(`/mall/setting`)
    }

    return (
        <div className="mypage">
            {/* 第一部分：头像和名字 */}
            <div className="profile-section">
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <img alt="image" src={Logo} className="round-image" />
                    <span style={{ marginLeft: '10px' }}>昵称</span>
                </div>
                <div className="setting">
                    <Tooltip title="设置" >
                        <Button onClick={() => setting()} size="large" type={"text"} icon={<SettingFilled />} className="btn"/>
                    </Tooltip>
                </div>

            </div>

            {/* 第二部分：积分、成长值和优惠券 */}
            <div className="stats-section">
                <div className="stat">
                    <h3>积分</h3>
                    <p>1000</p>
                </div>
                <div className="stat">
                    <h3>成长值</h3>
                    <p>Level 5</p>
                </div>
                <div className="stat">
                    <h3>优惠券</h3>
                    <p>3</p>
                </div>
            </div>

            {/* 第三部分：订单按钮 */}
            <div className="order-section">
                <div className="order-option">
                    <Tooltip title="全部订单">
                        <Button size="large" type={"text"} icon={<HomeFilled />} className="ant-btn" />
                    </Tooltip>
                    <p className="indented-1">全部订单</p>
                </div>
                <div className="order-option">
                    <Tooltip title="待付款">
                        <Button size="large" type={"text"} icon={<ShoppingFilled />} className="ant-btn" />
                    </Tooltip>
                    <p className="indented-2">待付款</p>
                </div>
                <div className="order-option">
                    <Tooltip title="待收货">
                        <Button size="large" type={"text"} icon={<FileTextFilled />} className="ant-btn" />
                    </Tooltip>
                    <p className="indented-2">待收货</p>
                </div>
                <div className="order-option">
                    <Tooltip title="退款/售后">
                        <Button size="large" type={"text"} icon={<SafetyCertificateFilled />} className="ant-btn" />
                    </Tooltip>
                    <p className="indented-3">退款/售后</p>
                </div>
            </div>

            {/* 第四部分：地址管理、足迹、关注、收藏、评价按钮 */}
            <div className="navigation-section">
                <div className="nav-option">
                    <i className="fas fa-map-marker-alt"></i>
                    <Button type="text"><SafetyCertificateFilled/>地址管理</Button>
                </div>
                <div className="nav-option">
                    <i className="fas fa-history"></i>
                    <Button type="text"><SafetyCertificateFilled/>我的足迹</Button>
                </div>
                <div className="nav-option">
                    <i className="fas fa-heart"></i>
                    <Button type="text"><SafetyCertificateFilled/>我的关注</Button>
                </div>
                <div className="nav-option">
                    <i className="fas fa-star"></i>
                    <Button type="text"><SafetyCertificateFilled/>我的收藏</Button>
                </div>
                <div className="nav-option">
                    <i className="fas fa-comment"></i>
                    <Button type="text"><SafetyCertificateFilled/>我的评价</Button>
                </div>
            </div>
            <Button onClick={logout} className="logout-btn">退出登录</Button>
        </div>
    )
}

export default User